<template>
  <el-row :gutter="40" type="flex" justify="space-around" class="mb15">
    <el-col v-for="(list,index) in linkman_list" :lg="12" :md="12" :sm="24" :key="index">
      <el-card>
        <el-row type="flex" justify="space-between" align="center">
          <span class="h4 list">
            {{ list.name }}
          </span>
          <el-button size="mini" @click="onContactClick(list,index)">查看</el-button>
        </el-row>
        <!--<div class="list">-->
        <el-row type="flex" justify="start" class="center">
          <p>手机</p>
          <p>{{ list.phone }}</p>
        </el-row>
        <el-row type="flex" justify="start" class="center">
          <p>生日</p>
          <p>{{ list.date }}</p>
        </el-row>
        <el-row type="flex" justify="start" class="center">
          <p>职务</p>
          <p>{{ list.duty }}</p>
        </el-row>
        <el-row type="flex" justify="start" class="center">
          <p>级别</p>
          <p>{{ list.level }}</p>
        </el-row>
        <!--</div>-->
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'ContactList',
  props: {
    linkman_list: {
      type: Array,
      default: () => { return [] }
    }
  },
  methods: {
    onContactClick(item, index) {
      this.$emit('onContactClick', item, index)
      this.$router.push({
        name: 'contacts.check_contacts',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style scoped>
    .list {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }

    .center {
        width: 50%;
        margin: 10px auto 0
    }

    p + p {
        margin-left: 15px;
    }
</style>
